<template>
  <div class="user-box">
    <div class="user-center">
      <!-- 显示用户头像 -->
      <img :src="user.avatar" alt="用户头像" class="user-avatar" />
      <!-- 显示用户昵称 -->
      <span class="user-nickname">{{ user.nickName }}</span>
      <icon-font type="icon-yumengtubiao_jiantouxiangxia"></icon-font>
    </div>
    <div class="popover">
      <div class="click-item" @click="logout">退出登录</div>
      <div class="click-item">个人中心</div>
      <div class="click-item">修改密码</div>
    </div>
  </div>
</template>

<script setup>
import useUserStore from '@/store/user'

const user = useUserStore().user

async function logout() {
  Modal.confirm({
    title: '提示',
    content: '您确定要退出吗？',
    onOk() {
      httpRequest('/admin/logout', {}).then(() => {
        message.success('退出登陆成功！')
        sessionStorage.removeItem('token')
        sessionStorage.removeItem('sysUser')
        sessionStorage.removeItem('menuList')
        setTimeout(() => {
          window.location.href = '/login'
        }, 1200)
      })
    },
  })
}
</script>

<style lang="less" scoped>
.user-box {
  position: relative;

  &:hover > .popover {
    z-index: 10;
    opacity: 1;
    transition: all 0.4s ease-out;
    transform: translateY(5px);
  }

  .popover {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: -1;
    box-sizing: border-box;
    width: 118px;
    padding: 10px 0;
    background: #fff;
    border-radius: 4px;
    box-shadow:
      0 6px 16px 0 rgb(0 0 0 / 8%),
      0 3px 6px -4px rgb(0 0 0 / 12%),
      0 9px 28px 8px rgb(0 0 0 / 5%);
    opacity: 0;
    transition: all 0.3s ease;

    .click-item {
      box-sizing: border-box;
      height: 30px;
      padding: 5px;
      line-height: 20px;
      text-align: center;
      cursor: pointer;
      box-shadow: #a8a7a7;

      &:hover {
        color: var(--current-color);
        background: var(--current-bg);
      }
    }
  }
}

.user-center {
  display: flex;
  align-items: center;
  cursor: pointer;

  .user-avatar {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    border-radius: 50%;
  }

  .user-nickname {
    margin-right: 5px;
    font-size: 14px;
    color: #333;
  }
}
</style>
